'use client';
import { Footer } from "@/components/footer"
import { Header } from "@/components/header"
import { SuccessCase } from "@/components/success-case"
import { ImageUploader } from "@/components/image-uploader"
import { HistoryGallery } from "@/components/history-gallery"
import React, { useState, useEffect } from "react"

export default function LandingPage() {
  const [modalOpen, setModalOpen] = useState(false)
  const [modalImg, setModalImg] = useState<string | null>(null)
  const [showHistory, setShowHistory] = useState(false)

  // 监听 hash 变化，切换历史记录显示
  useEffect(() => {
    const handleHashChange = () => {
      setShowHistory(window.location.hash === "#history")
    }
    handleHashChange()
    window.addEventListener("hashchange", handleHashChange)
    return () => window.removeEventListener("hashchange", handleHashChange)
  }, [])

  const handleEnlarge = (url: string) => {
    setModalImg(url)
    setModalOpen(true)
  }
  const closeModal = () => {
    setModalOpen(false)
    setModalImg(null)
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <main className="flex-1">
        {showHistory ? (
          <section className="py-16 md:py-20">
            <div className="container px-4 md:px-6">
              <h2 className="text-2xl font-bold tracking-tight sm:text-3xl mb-8">历史记录</h2>
              <HistoryGallery />
            </div>
          </section>
        ) : (
          <>
            {/* Hero Section with Upload */}
            <section className="relative overflow-hidden bg-gradient-to-b from-background to-muted/30 pb-16 pt-16 md:pb-20 md:pt-24">
              <div className="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:24px_24px]"></div>
              <div className="container relative z-10 px-4 md:px-6">
                <div className="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center mb-10">
                  <div className="rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary">
                    智能照片识别技术
                  </div>
                  <h1 className="text-balance text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl lg:text-6xl">
                    智能识别照片中的<span className="text-primary">人物与物品</span>
                  </h1>
                  <p className="text-balance text-muted-foreground md:text-xl max-w-2xl">
                    上传您的照片，我们的AI技术将自动识别照片中的人物、物品和场景，为您提供精准的标签和分析。
                  </p>
                </div>

                <div className="mx-auto max-w-4xl w-full">
                  <ImageUploader />
                </div>
              </div>
            </section>

            {/* How It Works - Simplified */}
            <section className="py-16 md:py-20">
              <div className="container px-4 md:px-6">
                <div className="mx-auto max-w-[58rem] space-y-4 text-center">
                  <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">简单三步，即刻体验</h2>
                  <p className="text-muted-foreground">快速获取照片中的所有信息</p>
                </div>
                <div className="mx-auto mt-10 grid max-w-4xl grid-cols-1 gap-6 md:grid-cols-3">
                  <div className="flex flex-col items-center space-y-3 rounded-lg border p-4 text-center">
                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                      <span className="text-xl font-bold">1</span>
                    </div>
                    <h3 className="font-medium">上传照片</h3>
                    <p className="text-sm text-muted-foreground">选择您想要分析的照片</p>
                  </div>
                  <div className="flex flex-col items-center space-y-3 rounded-lg border p-4 text-center">
                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                      <span className="text-xl font-bold">2</span>
                    </div>
                    <h3 className="font-medium">AI分析</h3>
                    <p className="text-sm text-muted-foreground">自动分析照片内容，识别各类对象</p>
                  </div>
                  <div className="flex flex-col items-center space-y-3 rounded-lg border p-4 text-center">
                    <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                      <span className="text-xl font-bold">3</span>
                    </div>
                    <h3 className="font-medium">查看结果</h3>
                    <p className="text-sm text-muted-foreground">获取详细的识别结果和标签</p>
                  </div>
                </div>
              </div>
            </section>

            {/* Success Cases */}
            <section className="bg-muted/30 py-16 md:py-20">
              <div className="container px-4 md:px-6">
                <div className="mx-auto max-w-[58rem] space-y-4 text-center">
                  <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">识别成功案例</h2>
                  <p className="text-muted-foreground">查看我们的AI技术如何准确识别各种场景中的对象</p>
                </div>
                <div className="mx-auto mt-10 grid max-w-6xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                  <SuccessCase
                    imageUrl="/01.png"
                    title="田园风景"
                    tags={["蓝天", "行人", "草坪", "狗"]}
                    accuracy={98}
                    onImageClick={handleEnlarge}
                  />
                  <SuccessCase
                    imageUrl="/02.png"
                    title="商业照片"
                    tags={["物品", "水", "瓶子", "室内"]}
                    accuracy={96}
                    onImageClick={handleEnlarge}
                  />
                  <SuccessCase
                    imageUrl="/08.jpg"
                    title="人物照片"
                    tags={["人", "树木", "室外", "水瓶"]}
                    accuracy={97}
                    onImageClick={handleEnlarge}
                  />
                  <SuccessCase
                    imageUrl="/09.jpg"
                    title="室外游玩"
                    tags={["多人", "行人", "室外", "手提包"]}
                    accuracy={95}
                    onImageClick={handleEnlarge}
                  />
                  <SuccessCase
                    imageUrl="/05.png"
                    title="公园游玩"
                    tags={["沙地", "木头", "小孩", "吊桥"]}
                    accuracy={94}
                    onImageClick={handleEnlarge}
                  />
                  <SuccessCase
                    imageUrl="/06.png"
                    title="商街照片"
                    tags={["楼房", "行人", "手提包", "街道"]}
                    accuracy={99}
                    onImageClick={handleEnlarge}
                  />
                </div>
              </div>
            </section>
          </>
        )}
        {/* 放大预览 Modal 保持不变 */}
        {modalOpen && (
          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70" onClick={closeModal}>
            <div className="bg-white rounded-lg p-4 max-w-3xl max-h-[90vh] flex flex-col items-center" onClick={e => e.stopPropagation()}>
              <img src={modalImg || ''} alt="放大预览" className="max-h-[80vh] w-auto object-contain" />
              <button className="mt-4 px-4 py-2 bg-primary text-white rounded" onClick={closeModal}>关闭</button>
            </div>
          </div>
        )}
      </main>
      <Footer />
    </div>
  )
}
